<template>
  <div class="min-h-screen bg-gray-50">
    <div class="flex flex-col">
      <div class="flex-1 p-8">
        <!-- 收件箱 -->
        <div class="inbox-container">
          <h2 class="text-2xl font-bold mb-6">收件箱</h2>
          <!-- 搜索框 -->
          <div class="p-4 mb-4 flex items-center">
            <el-input v-model="searchQuery" placeholder="搜索发件人..." class="flex-1 mr-2" prefix-icon="search" />
            <button class="px-4 py-2 bg-red-500 text-white hover:bg-red-600 !rounded-button whitespace-nowrap"
                    @click="openBatchDeleteConfirm">
                    批量删除
            </button>
          </div>
          <div class="space-y-4">
            <div v-for="mail in filteredInboxMails" :key="mail.id" class="p-4 border rounded-lg hover:bg-blue-100 hover:shadow-md cursor-pointer relative"
                 :class="{ selected: selectedMails.includes(mail) }">
              <div class="flex items-center justify-between">
                <div class="flex items-center gap-3">
                  <input type="checkbox" class="mr-2" :checked="selectedMails.includes(mail)" @change="toggleSelection(mail)" />
                  <div class="flex items-center gap-3 w-64" @click="showMailDetail(mail)">
                    <img :src="mail.senderAvatar" :alt="mail.sender" class="w-10 h-10 rounded-full object-cover" />
                    <div>
                      <div class="font-medium">{{ mail.sender }}</div>
                      <div class="text-sm text-gray-500"> {{ mail.subject }} </div>
                    </div>
                  </div>
                </div>
                <div class="time-info">{{ mail.date }}</div>
                <button class="ml-2 delete-button" @click.stop="openDeleteConfirm(mail)">                  
                  <el-icon class="delete-icon"><Delete /></el-icon>
               
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 邮件详情弹窗 -->
    <el-dialog v-model="mailDetailDialogVisible" title="邮件详情" width="600px" destroy-on-close>
      <div class="space-y-6">
        <div class="flex items-start gap-4 p-4 bg-gray-50 rounded-lg">
          <img :src="currentMail?.senderAvatar" :alt="currentMail?.sender" class="w-10 h-10 rounded-full object-cover" />
          <div class="flex-1">
            <div class="flex items-center justify-between">
              <div class="flex items-center gap-2">
                <div class="font-medium">{{ currentMail?.sender }}</div>
                <div v-if="currentMail?.originalReceiver" class="text-sm text-gray-500">
                  (与我的会话)
                </div>
              </div>
              <div class="text-sm text-gray-500">{{ currentMail?.date }}</div>
            </div>
            <div class="text-gray-600 mt-1">{{ currentMail?.subject }}</div>
          </div>
        </div>
        <div class="p-4 bg-white border rounded-lg min-h-\\[100px\\]">
          {{ currentMail?.content }}
        </div>
        <div class="border-t pt-4">
          <h4 class="font-medium mb-2">回复</h4>
          <el-input v-model="replyForm.content" type="textarea" :rows="4" placeholder="请输入回复内容" />
        </div>
      </div>
      <template #footer>
        <div class="flex justify-end gap-4">
          <button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 !rounded-button whitespace-nowrap"
                  @click="mailDetailDialogVisible = false">
            关闭
          </button>
          <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 !rounded-button whitespace-nowrap"
                  @click="replyMail">
            发送回复
          </button>
        </div>
      </template>
    </el-dialog>
    <!-- 批量删除确认框 -->
    <el-dialog v-model="batchDeleteConfirmVisible" title="确认删除" width="300px" destroy-on-close>
      <span>确定要删除选中的邮件吗？一旦删除，将无法找回。</span>
      <template #footer>
        <div class="flex justify-end gap-4">
          <button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 !rounded-button whitespace-nowrap"
                  @click="batchDeleteConfirmVisible = false">
            取消
          </button>
          <button class="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 !rounded-button whitespace-nowrap"
                  @click="confirmBatchDeleteSelectedMails">
            确认删除
          </button>
        </div>
      </template>
    </el-dialog>
    <!-- 单个邮件删除确认框 -->
    <el-dialog v-model="singleDeleteConfirmVisible" title="确认删除" width="300px" destroy-on-close>
      <span>确定要删除这封邮件吗？一旦删除，将无法找回。</span>
      <template #footer>
        <div class="flex justify-end gap-4">
          <button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 !rounded-button whitespace-nowrap"
                  @click="singleDeleteConfirmVisible = false">
            取消
          </button>
          <button class="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 !rounded-button whitespace-nowrap"
                  @click="confirmDeleteSingleMail">
                  删除  
            
          </button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, computed } from 'vue';
import { ElMessage,  } from 'element-plus';
import { Delete } from '@element-plus/icons-vue';


export default {
  components: {
    
  },
  setup() {
    const inboxMails = ref([
      {
        id: 1,
        sender: "林志远",
        senderAvatar: "https://ai-public.mastergo.com/ai/img_res/26d83890af9c8cf892b83694ee4235f7.jpg",
        subject: "关于贵公司的职位申请",
        date: "2024-02-20",
        content: "王总监您好，我对贵公司的全栈开发工程师职位非常感兴趣...",
      },
      {
        id: 2,
        sender: "陈思涵",
        senderAvatar: "https://ai-public.mastergo.com/ai/img_res/de809440c4d01186f036688c456bf4f8.jpg",
        subject: "面试时间确认",
        date: "2024-02-19",
        content: "收到贵司的面试邀请，想确认一下具体的面试时间...",
      },
    ]);

    const mailDetailDialogVisible = ref(false);
    const currentMail = ref(null);
    const replyForm = ref({
      content: "",
    });
    const searchQuery = ref("");
    const selectedMails = ref([]);
    const batchDeleteConfirmVisible = ref(false);
    const singleDeleteConfirmVisible = ref(false);
    const singleMailToDelete = ref(null);

    const filteredInboxMails = computed(() => {
      return inboxMails.value.filter(mail =>
        mail.sender.toLowerCase().includes(searchQuery.value.toLowerCase())
      );
    });

    const showMailDetail = (mail) => {
      currentMail.value = {
        ...mail,
        // 发件箱的消息需要调整发送者和头像为自己的信息
        sender: mail.sender,
        senderAvatar: mail.senderAvatar,
        // 保存原始信息用于回复
        originalReceiver: mail.sender,
        originalReceiverAvatar: mail.senderAvatar,
      };
      mailDetailDialogVisible.value = true;
    };

    const replyMail = () => {
      if (!replyForm.value.content) {
        ElMessage.error("请输入回复内容");
        return;
      }
      // 构建新的发送消息
      const newMail = {
        id: inboxMails.value.length + 1,
        receiver: currentMail.value.originalReceiver || currentMail.value.sender,
        receiverAvatar: currentMail.value.originalReceiverAvatar || currentMail.value.senderAvatar,
        subject: `Re: ${currentMail.value.subject}`,
        date: new Date().toISOString().split("T")[0],
        content: replyForm.value.content,
      };
      // 添加到收件箱
      inboxMails.value.unshift(newMail);
      ElMessage.success("回复成功");
      mailDetailDialogVisible.value = false;
      replyForm.value.content = "";
    };

    const toggleSelection = (mail) => {
      if (selectedMails.value.includes(mail)) {
        selectedMails.value.splice(selectedMails.value.indexOf(mail), 1);
      } else {
        selectedMails.value.push(mail);
      }
    };

    const openBatchDeleteConfirm = () => {
      if (selectedMails.value.length > 0) {
        batchDeleteConfirmVisible.value = true;
      } else {
        ElMessage.warning("请选择要删除的邮件");
      }
    };

    const confirmBatchDeleteSelectedMails = () => {
      inboxMails.value = inboxMails.value.filter(mail => !selectedMails.value.includes(mail));
      selectedMails.value = [];
      batchDeleteConfirmVisible.value = false;
      ElMessage.success("已删除选中的邮件");
    };

    const openDeleteConfirm = (mail) => {
      singleMailToDelete.value = mail;
      singleDeleteConfirmVisible.value = true;
    };

    const confirmDeleteSingleMail = () => {
      inboxMails.value = inboxMails.value.filter(mail => mail.id !== singleMailToDelete.value.id);
      ElMessage.success("已删除邮件");
      singleDeleteConfirmVisible.value = false;
    };

    return {
      inboxMails,
      mailDetailDialogVisible,
      currentMail,
      replyForm,
      searchQuery,
      selectedMails,
      batchDeleteConfirmVisible,
      singleDeleteConfirmVisible,
      singleMailToDelete,
      filteredInboxMails,
      showMailDetail,
      replyMail,
      toggleSelection,
      openBatchDeleteConfirm,
      confirmBatchDeleteSelectedMails,
      openDeleteConfirm,
      confirmDeleteSingleMail,
    };
  },
};
</script>

<style scoped>
.inbox-container {
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 2rem;
}

.mail-item {
  border: 1px solid #ccc;
  transition: background-color 0.3s, box-shadow 0.3s;
}

.mail-item:hover {
  background-color: #add8e6;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.time-info {
  text-align: center; /* 文本居中 */
  align-self: center; /* 垂直居中 */
  font-size: 0.9em; /* 字体大小稍微小一些 */
  padding: 0 4px; /* 内边距稍微减小 */
}

/* 弹性布局容器 */
.flex-container {
  display: flex;
  justify-content: space-between; /* 水平分布 */
  align-items: center; /* 垂直居中 */
}

/* 搜索框 */
.el-input {
  width: 100%;
}

/* 按钮样式 */
.el-button {
  margin-top: 8px;
}

.el-dialog__body {
  padding: 20px;
}

.el-dialog__footer {
  padding: 10px 20px;
}

.delete-icon {
  color: gray;
}

.delete-button {
  background-color: transparent;
  border: none;
  cursor: pointer;
}
</style>
